<template>
  <div>
    <h1>reactive 函数（定义data变量）</h1>
    <ul>
      <!-- <li>{{ formData }}</li>
      <li>{{ formData.age }}</li>
      <li @click="changeName">{{ formData.name }}</li> -->
      <li>{{ name }}:{{ age }}</li>
      <li @click="changeName">{{ name }}</li>
    </ul>
  </div>
</template>

<script>
/**
 * 使用步骤
1. 从vue框架中导入reactive函数
2. 在setup函数中调用reactive函数并将对象数据传入（只能定义复杂类型）
写法：const 变量名 = reactive(变量值)
3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
 */
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    // 1. 定义变量（相当于vue2data定义变量）
    const formData = reactive({ name: '小红', age: 18 })
    // 不能定义简单类型
    // const count = reactive(0)

    // 定义方法修改name
    const changeName = () => {
      // 注意：
      // 1. 局部改
      formData.name = Math.random() * 100
      // 2. 不能=号修改
      // formData = { name: '小刚', age: 20 }
    }
    // 2. 把变量或方法返回给模板（必须）
    // 这种写法 失去响应式
    return { ...toRefs(formData), changeName }
  }
}
</script>

<style lang="sass" scoped>
</style>
